<template>
    <div class="container">
        
        <!-- 搜索 -->
        <div class="search">
             <form action=""  id="search_from" @submit.prevent="showData">
                <input type="search" class="name-input"  placeholder="请输入您的取票号，如B1231" v-model.trim = 'value' @focus="handleinput()" @blur = 'queryCodeStatus(value)'>
                <!-- 删除icon -->
                <a href="javascript:;" class="clear-input" @click.stop = 'deleteValueInput' v-show = 'value?true:false'>
                    <img src="../../../../static/img/close@2x.png" class="clear-input-img" alt=""/>
                </a>
            </form>
        </div>
        <!-- 搜索历史 -->
        <div v-if = 'codeStaus != true'>
            <div class="search-history" v-if = 'resultList.length && blankShow != true'>
                <p class="search-history-title">搜索历史</p>
                <ul class="search-history-content">
                    <li class="result" v-for = '(item,index) in resultList' @click = "queryStatus(item.reserveNo)">{{item.reserveNo}}</li>
                </ul>
            </div>
            <div class="search-history" v-show = 'blankShow == true'>
                <img src="../../../../static/img/search-blank@2x.png" alt="">
                <p class="search-blank-tip">您查询的单号不存在哦！</p>
            </div>
        </div>
        <!-- 号码状态 -->
        <div class="codeStatus" v-if = 'codeStaus == true'>
            <img src="../../../../static/img/Group3@2x.png" alt="">
            <div class="details">
                <p class="status" :class= 'status =="pass"? "bgDone": "bgNotDone"' v-if = 'num && num > 3'>排队中</p>
                <p class="status" :class= 'status =="pass"? "bgDone": "bgNotDone"' v-if = '!num || num <=3' >{{status | state}}</p>
                <p>当前叫号至</p>
                <p :class= 'status =="pass"? "bgDone": "bgNotDone"'>{{nowNum}}号</p>
                <div class="tip">
                    <p v-if = 'num > 3'>请耐心等待哦！</p>
                    <p v-if = 'status =="upcoming" && num <=3'>您前面还有<span>{{num}}人</span>在等待，请稍事准备，前往窗口办理业务。</p>
                    <p v-if = 'status =="inProgress"'>您办理的业务当前正在叫号，赶快去办理吧！</p>
                    <p v-if = 'status =="pass"'>很抱歉，您的业务办理号已过号，请重新取号。</p>
                </div>
                
            </div>
        </div>
        <!-- 下载app -->
        <div class="downloadApp" v-show="hidshow">
            <div>
                <img class="downloadIcon" src="../../../../static/img/Group6@2x.png" alt="">
                <p class="download">
                    更多民生服务、本地生活资讯、 同城活动，尽在杭州市民卡app。
                </p>
            </div>
            <div class="download-btn" @click = 'download'>
                <button>即刻下载</button>
            </div>
        </div>
    </div>
</template>
<script>
/* jshint esversion: 6 */ 
import { dateStr, dateWeekDay,formatDate} from '../../../plugin/dateTransform';
import {extGetQueryReserveNo,extQueryReserveProgress,getOpenId} from '../../../plugin/config';

    export default {
        name: 'HomePage',
        data() {
            return {
                value : '',
                status: "",
                num: '',
                state: '',
                nowNum: "",
                blankShow: false,
                 codeStaus: false,
                resultList: [
                ],
                docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
                showHeight: document.documentElement.clientHeight,   //实时屏幕高度
                hidshow:true , //显示或者隐藏footer,
                openId: ''
            };
        },
        filters: {
            state (val) {
                console.log('jiaohao',val);
                 if (val == 'inProgress') {
                    return '正在叫号';
                }else if (val == 'upcoming') {
                    return '即将叫号';
                }else if (val == 'pass') {
                    return '已过号';
                }
            },
        },
        components: {
        },
        methods: {
            download () {
                window.location.href="http://a.app.qq.com/o/simple.jsp?pkgname=com.smk&ckey=CK1373451974067";
                //  腾讯统计代码 
                MtaH5.clickStat("appdownload")
            },
            // 点击搜索差号，一键删除全部输入内容
            deleteValueInput() {
                if (this.value) {
                    this.value = '';
                }
            },
            //输入框得到焦点，查询搜索历史
            handleinput () {
                this.queryHistoryCode();
                this.codeStaus = false;
                this.blankShow = false;
            },
            // 失去焦点查询输入内容 
            queryCodeStatus (value) {
                console.log('失去焦点时的输入',value);
                this.queryCode(value);
                //  腾讯统计代码 
                MtaH5.clickStat("search")
            },
            // 
            showData () {
                console.log('点击手机键盘的搜索按钮',this.value);
                this.queryCode(this.value);
                //  腾讯统计代码 
                MtaH5.clickStat("search")
            },
            // 查询历史记录的号
            queryStatus(value) {
                this.value = value;
                this.queryCode(value);
                //  腾讯统计代码 
                MtaH5.clickStat("search")
            },
            // 查询号码进度请求
            queryCode (value) {
                if (value == '') {
                    return
                }
                console.log('val',value);
                extQueryReserveProgress ({
                    openId: localStorage.getItem('openId'),
                    networkCode: this.$route.query.networkCode,
                    reserveNo: value,
                }).then(res => {
                    console.log('号码进度',res);
                    if (res.code == 0) {
                        if (res.response.state) {
                            this.status = res.response.state;
                            this.num = res.response.num;
                            this.nowNum = res.response.nowNum;
                            this.codeStaus = true;
                        }
                    } else if(res.code == -1) {
                        console.log('---------------');
                        this.blankShow =true;
                        this.codeStaus = false; 
                    }else{
                        this.$toast(res.msg);
                    }
                })
            },
            // 查询历史记录取票号
            queryHistoryCode () {
                // openid
                console.log("openId",this.openId);
                console.log("openId",this.openId);
                extGetQueryReserveNo ({
                    openId: localStorage.getItem('openId')
                }).then(res => {
                    console.log('历记录',res);
                    if (res.code == 0) {
                        if (res.response.length>3) {
                            res.response.length = 3;
                            this.resultList = res.response;
                        } else {
                            this.resultList = res.response;
                        }
                    } else {
                        console.log(res.msg);
                    }
                })

            },
            // 获取url中的参数
            getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg); //匹配目标参数
                if (r != null) return unescape(r[2]);
                    return null; //返回参数值
            },
            getOpenId (code) {
                // 授权后获取用户的基本信息
                console.log(code);
                // var getUserInfoByCode = "https://weixin.96225.com/smk_weixin/user/getUserInfoByCode.ext";    
                // 如果有的话，用code，换openId   
                console.log('code',this.getUrlParam("code"));
                if(this.getUrlParam("code")){
                    getOpenId({
                        code:this.getUrlParam("code")

                        // code:"011hSQAg03UzKv1UttAg0HAKAg0hSQAa"
                    }).then(data => {
                        console.log('获取openid',data)                  
                        if(data.code=="0"){                    
                            // 返回业务地址，带用户信息                    
                            var info = data.response;    
                            this.openId =info.openid;
                            console.log("openId",this.openId);
                            console.log("openId",info.openid);
                            localStorage.setItem('openId',info.openid);//写缓存--微信用户信息               
                        }else {
                            this.$toast(data.msg);
                        }
                    })       
                    
                }else {
                    this.$toast(data.msg);
                }

            },

    },
    created() {
        document.title="业务办理进度查询";
    },
    mounted: function() {
      const appId="wx40e324205510b531";
        const code = this.getUrlParam('code');
        const location = window.location.href.split('index.html')[0]+`index.html#/?networkCode=cnfwt`;
        console.log('location',location);
            console.log('location', window.location.href);
        if (code == null || code == '') {
            // var redirect_urls= encodeURIComponent("http://weixin3.szfangle.com/wxapp/roadOutSide/view/Payment.html")
            window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId+ "&redirect_uri=" +
                      encodeURIComponent(location)+ //这里放当前页面的地址
                     "&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect";
                     console.log("----------------CODE----------------------：" + code);
        } else {
            this.getOpenId(code)// 通过获取到的code获得OpenId
        }
        window.onresize = () => {
            return (() => {
                this.showHeight = document.body.clientHeight;
            })()
        }


    },
    watch: {
        showHeight:function() {
                if(this.docmHeight > this.showHeight){
                    this.hidshow=false
                }else{
                    this.hidshow=true
                }
            }
    }
}
</script>
<style>
.container {
    width: 100%;
    min-height: 100vh;
    background:rgba(246,246,246,1);
}
.downloadApp {
    padding: .2rem .15rem .2rem .16rem;
    background:rgba(255,255,255,1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow:0px -2px 5px 0px rgba(0,0,0,0.08);
    position: fixed;
    bottom: 0;
    left: 0;
}
.downloadApp div:nth-of-type(1)  {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.downloadIcon {
    width:.4rem;
    height:.4rem;
}
.download {
    font-size:.14rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
    text-align: left;
    width: 2.1rem;
    margin-left: .1rem;
}
.download-btn {
    background:rgba(67,173,127,1);
    border-radius:.18rem;
    padding: .08rem .14rem .07rem;

}
.download-btn > button {
    font-size:.14rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    background:rgba(67,173,127,1);
    border:0;
}
.search {
    margin: 0 auto;
    background:rgba(255,255,255,1);
    padding: .10rem 0 .16rem;
    position: relative;
}
.search input {
    padding: .08rem 0 .07rem .15rem;
    width: 3.45rem;
    font-size:.14rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(136,136,136,1);
    border-radius:.25rem;
    background:rgba(246,246,246,1);
    border:0;
    -webkit-appearance : none ;
}
.clear-input{
    position: absolute;
    right: 0.3rem;
    bottom: .2rem;
}
.clear-input-img {
    height: 0.16rem;
    width: 0.16rem;
}
/*删除按钮未输入时，默认不显示*/
.name-input {
    padding-left: 0.2rem;
}
.search-history {
    /*min-height: 5.42rem;*/
    min-height: calc(100vh - .55rem);
    background:rgba(255,255,255,1);
}
.search-history img {
    margin-top: .4rem;
    width:2.74rem;
    height:1.28rem;
}
.search-history-title {
    padding: .05rem 0 .1rem .2rem;
    font-size:.14rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(136,136,136,1);
    text-align: left;
}
.search-history-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 .2rem;
}
.result {
    padding: .07rem .3rem .08rem .3rem;
    font-size:.14rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
    background:rgba(246,246,246,1);
    border-radius:.18rem;
    margin-right: .08rem;
}
.search-blank-tip {
    font-size:.17rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(136,136,136,1);
}
.codeStatus {
    padding: .2rem .12rem 0;
    position: relative;
    min-height: calc(100vh - .8rem);
    background:rgba(255,255,255,1);
}
.codeStatus img {
    width:3.35rem;
    height:2.33rem;
}
.details {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: .23rem 0 .39rem;
}
.details .status,.details p:nth-of-type(3)  {
    font-size:.2rem;
    font-family:PingFang-SC-Bold;
    font-weight:bold;
}
.details p:nth-of-type(2),.details .tip   {
    font-size:.14rem;
    font-family:PingFang-SC-Bold;
    font-weight:400;
}
.details .status {
    margin-bottom: .2rem;
    margin-top: .21rem;
    
}
.details p:nth-of-type(2)  {
    margin-top: .13rem;  
    padding: .05rem .02rem;
}
.details p:nth-of-type(3)  {
    margin-top: .03rem;
}
.details .tip  {
    margin-top: .09rem; 
    margin: .09rem .41rem 0;
}
.tip > p > span {
    color:rgba(67,173,127,1);
}
.bgDone {
    color: #FA541C;
}
.bgNotDone {
    color: #43AD7F;
}
</style>
